import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { Empty, Spin, Timeline } from 'antd';
import cn from 'classnames';
import EmptyBgSvg from '@containers/asset-manage/components/asset-content/images/empty-bg.svg';

class RecordTimeline extends React.Component {
  static propTypes = {
    active: PropTypes.bool,
    loader: PropTypes.func,
    recordComponent: PropTypes.func,
    recordComponentProps: PropTypes.object,
    className: PropTypes.string
  };

  static defaultState = {
    page: 0, // page === 0表示从未加载过
    pageSize: 20,
    total: 0,
    recordList: [],
    staffList: [],
    lastElement: null,
    loading: false,
    informationType: null,
    informationContent: null
  };

  constructor(props) {
    super(props);
    this.state = _.clone(RecordTimeline.defaultState);
  }

  componentDidMount() {
    this.getRecords();
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.active && this.props.active) {
      // 重置state
      this.setState(_.clone(RecordTimeline.defaultState), this.getRecords);
    }
  }

  getRecords = () => {
    const { loader } = this.props;
    const { page, pageSize, total, recordList } = this.state;
    if (page !== 0 && total <= page * pageSize) {
      return;
    }
    this.setState({ loading: true });
    const nextPage = page + 1;
    loader({ page: nextPage, pageSize })
      .then(res => {
        const { count, list, lastElement } = res;
        this.setState({
          total: count,
          page: nextPage,
          recordList: recordList.concat(list),
          lastElement: lastElement
        });
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  };

  render() {
    const { recordComponent: RecordComponent, className, recordComponentProps = {} } = this.props;
    const { loading, recordList, page, pageSize, total, lastElement } = this.state;
    const hasMore = total > page * pageSize;

    let loadMoreElement = null;
    if (loading) {
      loadMoreElement = (
        <Timeline.Item>
          <Spin className="loading-more" spinning size="small" tip="加载中..." />
        </Timeline.Item>
      );
    } else if (hasMore) {
      loadMoreElement = (
        <Timeline.Item>
          <a className="load-more" onClick={this.getRecords}>
            加载更多
          </a>
        </Timeline.Item>
      );
    }

    return _.isEmpty(recordList) && _.isEmpty(lastElement) && !loading ? (
      <Empty
        className={cn('record-timeline', 'empty-extra', className)}
        image={EmptyBgSvg}
        description="诶，好像什么都没有"
      />
    ) : (
      <div className={cn('record-timeline', className)}>
        <Timeline>
          {_.map(recordList, record => (
            <Timeline.Item key={record._id}>
              <RecordComponent record={record} {...recordComponentProps} />
            </Timeline.Item>
          ))}
          {loadMoreElement}
          {lastElement && <Timeline.Item>{lastElement}</Timeline.Item>}
        </Timeline>
      </div>
    );
  }
}

export default RecordTimeline;
